<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="keyword" content="Quick Doc Service">
    <title th:text="${title}"></title>

    <!-- Icons -->
    <link rel="stylesheet" type="text/css" href="../css/fontawesome-all.min.css"/>
    <link rel="stylesheet" type="text/css" href="../css/simple-line-icons.css"/>
    <!--layui and necessary plugins-->
    <link rel="stylesheet" type="text/css" href="../lib/layui/css/layui.css" media="all"/>
    <!-- Main styles for this application -->
    <link rel="stylesheet" type="text/css" href="../css/style.min.css"/>
    <link rel="stylesheet" type="text/css" href="../css/mxleader-style.css"/>
</head>

<body>

<div class="card">

    <form id="password-form" class="layui-form layui-form-pane" action="">

        <div class="layui-form-item">
            <label class="layui-form-label">原密码</label>
            <div class="layui-input-inline">
                <input type="password" id="password" name="password" required="required"
                       placeholder="请输入原密码" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">新密码</label>
            <div class="layui-input-inline">
                <input type="password" id="new-password" name="newPassword" required="required"
                       placeholder="请输入新密码" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">新密码确认</label>
            <div class="layui-input-inline">
                <input type="password" id="verify-password" name="verifyPassword" required="required"
                       placeholder="请输入新密码" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="button" id="changePsBtn" class="layui-btn layui-btn-sm">
                    <i class="fas fa-wrench"></i> 修改
                </button>
            </div>
        </div>

    </form>
</div>

<!-- Bootstrap and necessary plugins -->
<script src="../js/jquery.min.js"></script>
<script src="../js/popper.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/pace.min.js"></script>
<script src="../lib/layui/layui.js" charset="utf-8"></script>

<script type="text/html" id="opsBar">
    <button class="layui-btn layui-btn-danger layui-btn-sm" lay-event="del-auth">
        <i class="fas fa-trash-alt" title="删除"></i>
    </button>
</script>
<script th:inline="javascript">
    /*<![CDATA[*/

    var index = parent.layer.getFrameIndex(window.name); //获取窗口索引

    $("#changePsBtn").click(function () {
        $.ajax({
            type: 'POST',
            url: '/api/user/changePassword?' + $('#password-form').serialize(),
            contentType: 'application/json; charset=utf-8',
            async: false,
            dataType: 'json',
            error: function () {
                alert('Connection error');
            },
            success: function (res) {
                switch (res.code) {
                    case 0: {
                        if (res.data === true) {
                            parent.layer.msg('密码修改成功!');
                        } else {
                            parent.layer.alert('修改失败!', {icon: 2});
                        }
                    }
                        break;
                    case -1: {
                        parent.layer.alert(res.msg, {icon: 2});
                    }
                        break;
                }
                parent.layer.close(index);
            }
        });
    });

    /*]]>*/
</script>
</body>
</html>